今天就來繼續做網站元件的介紹，在電商網站中常需要使用到下拉式選單，像是在做商品尺寸的選擇、顏色的選擇都會用到它，至於下拉式選單怎麼做呢？

常見的寫法有兩種，之前在做導覽列的時候介紹過用<ul><li>標籤做的選單，優點是可控性更高，可以更自由的去做樣式的調整，搭配jquery也可以實現出<select>的選單效果。今天要介紹的<select>標籤，優點是可更快速直覺的建立出選單，但能調整的樣式相對就比較少一點。

<select>可以做為選單的容器，裡面用 <option> 標籤來建立個別選項，name用於說明選單名稱，選項內容會放在 <option></option>裡面，常見的 <option> 屬性有以下幾種：

• selected : 設定預先選取此選項
• disabled : 把選項設定為不能選的狀態
• value : 設定選了該選項，表單要傳送給伺服器的值

這裡做一個簡單的下拉式選單範例，大家可以點擊codepen去看一下！

<select name="size" class="size">
    <option value="" selected>商品尺寸</option> /* 設定預先選取*/
    <option value="L">L</option>
    <option value="M">M</option>
    <option value="S">S</option>
    <option value="XS" disabled>XS</option> /* 設定選項不可選*/
</select>

可以做少部分的CSS樣式更改，要涵蓋的選項的樣式就只能透過 JavaScript，這邊就暫時不討論，有興趣的話可以用之前的<ul><li>標籤去嘗試會相對簡單一些喔！

.size{
  width:200px;
  height:30px;
  background-color:#1e1e1e;
  color:#fff;
}

https://codepen.io/atain9487/pen/gOREGge

在這個主題的最後，跟大家介紹CSS動畫，這個語法簡單又能在網站中建立出動態效果，在一些樣式的設計和使用上是大大加分喔！

要創建CSS動畫首先要了解@keyframes 規則，@keyframes可以讓動畫在特定時間逐漸從當前樣式更改為新樣式，要在@keyframes 創建動畫需要把它綁定一個元素，像是範例中綁定的<div>元素。

div
{   width: 100px;
    height: 100px;
    animation: color 5s; 
}

@keyframes color
{
    from {background: #FF0055;}
    to {background: #00006;}
}

在範例中我們使用了from(0%)、to(100%)，也可以使用其他百分比來控制動畫的更改時間，內容可以依照自己的設計去做一些顏色、大小、位置等多種變化。

animation需要了解的幾種屬性：

animation-name : 定義動畫名稱。

animation-duration :  指定動畫完成所需的時間。（如果忘記寫這個屬性就不會觸發動畫喔，因為默認值為 0 秒）

animation-timing-function : 指定動畫的速度曲線。

animation-delay : 指定動畫開始的延遲時間。

animation-iteration-count : 指定動畫運行的次數，infinite可一直重複播放。

範例使用了以上的幾個動畫屬性，大家可以改動屬性去看動畫產生的變化，想要做動畫不是只能用 JavaScript 或 jQuery 才做得到，只要運用好這些屬性CSS也可以在網站做出很棒的動畫效果喔！

div
{   width: 100px;
    height: 100px;
    animation-name: color;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 1s;
    animation-iteration-count: infinite;
}

@keyframes color
{
    0% {background: #FF0055;}
    50% {background: #a79de3;}
    100% {background: #00006;;}
}

那這個主題的分享就到第三篇這裡結束啦！希望大家可以學會後運用在自己的網頁上，讓你的電商網站更吸引目光喔！